{% extends 'base.html' %}
{% load custom_tag %}
{% block title %}文章分类 | {% endblock %}
{% block banner %}
<div class="bg-cover pd-header about-cover">
    {% include 'banner.html' %}
</div>
{% endblock %}

{% block custom_style%}
    <style>
        .category-1{
            background-color: #F9EBEA;
        }

        .category-2{
            background-color: #F5EEF8;
        }

        .category-3{
            background-color: #D5F5E3;
        }

        .category-4{
            background-color: #E8F8F5;
        }
        .category-5{
            background-color: #ddf9e7;
        }

        .category-6{
            background-color: #d2d6f8;
        }

        .category-7{
            background-color: #f5deba;
        }

        .category-8{
            background-color: #f8f6c8;
        }

        .category-9{
            background-color: #d8f5c1;
        }

        .category-10{
            background-color: #def8f8;
        }

    </style>
{% endblock %}

{% block contents %}
<main class="content" style="min-height: 783px;">



<div id="category-cloud" class="container chip-container">
    <div class="card">
        <div class="card-content">
            <div class="tag-title center-align">
                <i class="fas fa-bookmark"></i>&nbsp;&nbsp;文章分类
            </div>
            <div class="tag-chips">
                {% for i in categories %}
                <a href="{% url 'article_category' i.id %}" title="{{ i.name }}: {{ i.article_set.all | length }}">
                    <span class="chip center-align waves-effect waves-light
                             {% ifequal pk i.id %}chip-active{% else %}chip-default{% endifequal %} category-{% random_num %}">{{ i.name }}
                        <span class="tag-length">{{ i.article_set.all | length }}</span>
                    </span>
                </a>
                {% endfor %}
            </div>
        </div>
    </div>
</div>



    <article id="articles" class="container articles" style="position: relative; height: 2816px;">
        <div class="row tags-posts">
            {% for article in articles.object_list %}
                <div class="article tag-post col s12 m6 l4 aos-init" data-aos="zoom-in" style="position: absolute; left: 0px; top: 2411px;">
                <div class="card">
                    <a href="{% url 'detail' article.id %}">
                        <div class="card-image tag-image">

                            <img src="{{ article.cover.url }}" class="responsive-img" alt="{{ article.title }}">

                            <span class="card-title">{{ article.title }}</span>
                        </div>
                    </a>
                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            {{ article.desc }}
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>{{ article.add_time }}
                            </span>
                            <span class="publish-author">

                                <i class="fas fa-bookmark fa-fw icon-category"></i>

                                <a href="{% url 'article_category' article.category_id %}" class="post-category">
                                    {{ article.category }}
                                </a>


                            </span>
                        </div>
                    </div>


                    <div class="card-action article-tags">
                        {% for tag in  article.tag.all %}
                        <a href="{% url 'article_tag' tag.id %}">
                            <span class="chip tag-color">{{ tag }}</span>
                        </a>
                        {% endfor %}
                    </div>

                </div>
            </div>
            {% endfor %}
        </div>
    </article>
</main>
{% endblock %}

{% block pagination %}
    <div class="container paging">
        <div class="row">
            <div class="col s6 m4 l4">
                {% if articles.has_previous %}
                <a href="?{{ articles.previous_page_number.querystring }}" class="left btn-floating btn-large waves-effect waves-light left-color">
                    {% else %}
                <a class="left btn-floating btn-large disabled">
                {% endif %}
                    <i class="fas fa-angle-left"></i>
                </a>
            </div>


            <div class="page-info col m4 l4 hide-on-small-only">
                <div class="center-align b-text-gray">{{ articles.number }} / {{ articles.pages | last }}</div>
            </div>

            <div class="col s6 m4 l4">
                {% if articles.has_next %}
                <a href="?{{ articles.next_page_number.querystring }}" class="right btn-floating btn-large waves-effect waves-light right-color">
                {% else%}
                <a class="right btn-floating btn-large disabled">
                {% endif %}
                    <i class="fas fa-angle-right"></i>
                </a>
            </div>

        </div>
    </div>
    {% endblock %}